<template>
  <wd-layout-model>
    <no-ssr placeholder="Loading...">
      <avue-form ref="form" v-model="obj" :option="option0" label-width="300px">
        <template slot="menuForm">
          <el-button type="primary" @click="handleSubmit">生成</el-button>
          <el-button v-if="isShow" type="primary" @click="()=>download(tableName + 'Edit.vue', editHtml)">下载编辑页</el-button>
          <el-button v-if="isShow" type="primary" @click="()=>download(tableName + 'List.vue', tableHtml)">下载列表页</el-button>
        </template>
      </avue-form>
      <div v-if="isShow">
        <div>表单规则参考：
          <a href="https://avue.top/doc/crud/crud-doc" target="_blank">列表页</a>
          <a href="https://avue.top/doc/form/form-doc" target="_blank">编辑页</a>
        </div>
        <div>编辑页html：</div>
        <pre>{{ editHtml }}</pre>
        <div>列表页</div>
        <pre>{{ tableHtml }}</pre>
      </div>
    </no-ssr>
  </wd-layout-model>
</template>
<script>
import sqlFormatter from 'sql-formatter'
export default {
  data() {
    return {
      isShow: false,
      obj: {
        sql: `CREATE TABLE Persons
(
Id_P int,
LastName varchar(255),
FirstName varchar(255),
Address varchar(255),
City varchar(255)
)`
      },
      option0: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: 120,
        column: [
          {
            label: '建表sql语句',
            prop: 'sql',
            type: 'textarea',
            rules: [
              {
                required: true,
                message: '请输入用户名',
                trigger: 'blur'
              }
            ]
          }
        ]
      },
      tableName: '',
      editHtml: '',
      editTmp: `\<template\>
  <wd-layout-model>
    <div>
      <avue-form ref="form" v-model="<{tableName}>" :option="option" label-width="300px">
        <template slot="menuForm">
          <el-button type="primary" @click="handleSubmit">提 交</el-button>
        </template>
      </avue-form>
    </div>
  </wd-layout-model>
\<\/template\>
\<script\>
export default {
  data() {
    return {
      <{tableName}>: {},
      option: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: 120,
        column: [<{columns}>
        ]
      }
    }
  }
}
\<\/script\>

`,
      tableHtml: '',
      tableTmp: `\<template\>
  <wd-layout-model>
    <div class="wd-table">
      <avue-crud :data="data" :option="option" :page="page" @on-load="onLoad" />
    </div>
  </wd-layout-model>
\</template\>
\<script\>
export default {
  data() {
    return {
      page: {
        pageSize: 20
      },
      data: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        column: [<{columns}>
        ]
      }
    }
  },
  methods: {
    onLoad(page) {}
  }
}
\<\/script\>

`
    }
  },
  methods: {
    initEdit(columns) {
      let htmlTmp = this.editTmp
      htmlTmp = htmlTmp.replace(/\<\{tableName\}\>/g, this.tableName)
      this.editHtml = htmlTmp.replace(/\<\{columns\}\>/g, columns)
    },
    initTable(columns) {
      let htmlTmp = this.tableTmp
      htmlTmp = htmlTmp.replace(/\<\{tableName\}\>/g, this.tableName)
      this.tableHtml = htmlTmp.replace(/\<\{columns\}\>/g, columns)
    },
    handleSubmit() {
      this.obj.sql = sqlFormatter.format(this.obj.sql)
      const sqls = this.obj.sql.split('\n')
      let columns = ''
      sqls.forEach((item, i) => {
        const obj = item.replace(/^\s+|\s+$|,|'/g, '').split(' ')
        if (i === 0 && obj.length > 3) {
          this.tableName = obj[2]
        }
        if (i !== 0 && i < sqls.length - 1) {
          const label = obj.length >= 3 ? obj[obj.length - 1] : obj[0]
          const prop = this.toHump(obj[0])
          columns += `
          {
            label: '${label}',
            prop: '${prop}'
          }`
          if (i < sqls.length - 2) {
            columns += ','
          }
        }
      })
      this.initEdit(columns)
      this.initTable(columns)
      this.isShow = true
      // this.download(this.tableName + '.vue', this.editHtml)
    },
    download(filename, text) {
      var element = document.createElement('a')
      const href = `data:text/plain;charset=utf-8,${encodeURIComponent(text)}`
      element.setAttribute('href', href)
      element.setAttribute('download', filename)
      element.style.display = 'none'
      document.body.appendChild(element)

      element.click()

      document.body.removeChild(element)
    },
    // 下划线转换驼峰
    toHump(name) {
      return name.replace(/\_(\w)/g, function(all, letter) {
        return letter.toUpperCase()
      })
    },
    // 驼峰转换下划线
    toLine(name) {
      return name.replace(/([A-Z])/g, '_$1').toLowerCase()
    }
  }
}
</script>
